<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成二维码 和 合并图片 功能</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <blockquote class="">
        生成二维码 和 合并图片 功能
    </blockquote>
    <p class="head">
    <ul class="list-unstyled">
        <li class="text-info">1. php生成二维码</li>
        <li class="text-success">2. 将生维码合并到大图里</li>
    </ul>
    </p>
    <div class="row">
        <div class="col-md-6 col-xs-12 col-md-offset-3">
            <div class="tabbable" id="tabs-868298">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#panel-1" data-toggle="tab">预览图片</a>
                    </li>
                    <li>
                        <a href="#panel-2" data-toggle="tab">生成二维码</a>
                    </li>
                    <li>
                        <a href="#panel-3" data-toggle="tab">合成图片</a>
                    </li>
                    <li>
                        <a href="#panel-4" data-toggle="tab">源码下载</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-1">
                        <p>
                            <img src="asset/girl.png" class="img-responsive"/>
                        </p>
                    </div>
                    <div class="tab-pane " id="panel-2">
                        <form role="form" method="post" class="form-horizontal" onsubmit="return false"
                              style="margin-top: 10px;">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">大小</label>
                                <div class="col-sm-9">
                                    <select name="size" class="form-control">
                                        <option value="10">默认10大小</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="content">内容</label>
                                <div class="col-sm-9">
                                    <input type="text" name="content" class="form-control" value="http://www.sgfoot.com" placeholder="输入内容"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-9 col-sm-offset-3">
                                    <button class="btn btn-primary submit">生成二维码</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">显示结果</label>
                                <div class="col-sm-9">
                                    <p class="result"></p>
                                </div>
                            </div>
                        </form>

                    </div>
                    <div class="tab-pane " id="panel-3">
                        <ul>
                            <li>将目标图贴在原始图上面</li>
                            <li>原始图,可以是网络图,必须有效,大小800*800</li>
                            <li>目标图,可以生成一个二维码,大小:100*100</li>
                        </ul>
                        <form role="form" class="form-horizontal" onsubmit="return false" style="margin-top: 10px;">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">原始图</label>
                                <div class="col-sm-9">
                                    <input type="text" name="src" class="form-control" placeholder="图片地址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">目标图</label>
                                <div class="col-sm-9">
                                    <input type="text" name="tar" class="form-control" placeholder="图片地址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">边缘间隙</label>
                                <div class="col-sm-9">
                                    <input type="text" name="gap" value="5" class="form-control" placeholder="单位是像素">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">占比</label>
                                <div class="col-sm-9">
                                    <select class="form-control" name="scale">
                                        <option value="2">背景图宽的1/2</option>
                                        <option value="3">背景图宽的1/3</option>
                                        <option value="4" selected>背景图宽的1/4</option>
                                        <option value="5">背景图宽的1/5</option>
                                        <option value="6">背景图宽的1/6</option>
                                        <option value="7">背景图宽的1/7</option>
                                        <option value="8">背景图宽的1/8</option>
                                        <option value="9">背景图宽的1/9</option>
                                        <option value="10">背景图宽的1/10</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">位置</label>
                                <div class="col-sm-9">
                                    <select class="form-control" name="position">
                                        <option value="center">居中</option>
                                        <option value="random">随机</option>
                                        <option value="right-bottom" selected>右下角</option>
                                        <option value="right-top">右上角</option>
                                        <option value="left-bottom">左下角</option>
                                        <option value="left-top">左上角</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-9 col-sm-offset-3">
                                    <button class="btn btn-success submit">合并图片</button>
                                    <button class="btn btn-success clean">清理结果</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">显示结果</label>
                                <p class="result"></p>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="panel-4">
                        <div class="row" style="margin-top: 10px;">
                            <a href="sourece_code.zip" download="sgfoot-qr-image-merge.zip" class="btn btn-info center-block">下载源码</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#panel-2 form .submit").click(function () {
            var _this = $(this);
            var form = _this.parents('form');
            var content = form.serialize();
            console.log(content);
            $.post('action.php?act=qr', content, function (rev) {
                if (rev.status === 0) {
                    var html = "<img src='" + rev.data + "' class='img-responsive' />";
                    form.find(".result").append(rev.data);
                    form.find(".result").append(html);
                } else {
                    form.find(".result").html(rev.msg);
                }
            }, 'json');
        });
        $("#panel-3 form .submit").click(function () {
            var _this = $(this);
            var form = _this.parents('form');
            var content = form.serialize();
            console.log(content);
            $.post('action.php?act=merge', content, function (rev) {
                if (rev.status === 0) {
                    var html = "<img src='" + rev.data + "' class='img-responsive' />";
                    form.find(".result").append(rev.data);
                    form.find(".result").append(html);
                } else {
                    form.find(".result").html(rev.msg);
                }
            }, 'json');
        });
        $("#panel-3 form .clean").click(function () {
            var _this = $(this);
            var form = _this.parents('form');
            form.find('.result').empty();
        });
        var count = 50;
        for (var i = 1; i <= count; i++) {
            var size = 10 + i;
            $("#panel-2 form select").append("<option value='" + size + "'>" + size + "</option>");
        }
    });
</script>
</body>
</html>